@(movieList : List[model.Movie], user:model.Person, counter:Integer)

<!DOCTYPE html>

<html>
    <head>

        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
    	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
  
    </head>
    <body>  
               
          <script>
				$( document ).ready(function() {
					for (var i=1;i<201;i++)
					{
						var value=document.getElementById('StarList'+i).value
						if(value!='null')
						{
							var img='image'+i;
							switch(value)
							{
							    case '0' : document.getElementById(img).src = '@routes.Assets.at("images/0star.png")'; break;
							    case '1' : document.getElementById(img).src = '@routes.Assets.at("images/1star.png")'; break;
							    case '2' : document.getElementById(img).src = '@routes.Assets.at("images/2star.png")'; break;
							    case '3' : document.getElementById(img).src = '@routes.Assets.at("images/3star.png")'; break;
							    case '4' : document.getElementById(img).src = '@routes.Assets.at("images/4star.png")'; break;
							    case '5' : document.getElementById(img).src = '@routes.Assets.at("images/5star.png")'; break;
							}
						}
					}				
				});
				          
				function setStars(id,value,user) {				
					var v='image'+id;
				    var img = document.getElementById(v);
				    switch(value)
				    {
				    case 'null' : img.src = '@routes.Assets.at("images/null.png")'; break;
				    case '0' : img.src = '@routes.Assets.at("images/0star.png")'; break;
				    case '1' : img.src = '@routes.Assets.at("images/1star.png")'; break;
				    case '2' : img.src = '@routes.Assets.at("images/2star.png")'; break;
				    case '3' : img.src = '@routes.Assets.at("images/3star.png")'; break;
				    case '4' : img.src = '@routes.Assets.at("images/4star.png")'; break;
				    case '5' : img.src = '@routes.Assets.at("images/5star.png")'; break;
				    }				   
				}				
				
			</script>
    
	    <div class="navbar navbar-default navbar-fixed-top">	    	
			<div class="container">
			    <div class="navbar-header">
			    	<h3></h3> 			        
			   	</div>
			   	
			   	<div id="navbar-main" class="navbar-collapse collapse" >
    				<ul class="nav navbar-nav">    				
    					<li>
    						<h4>Hello, </h4>
    					</li>
    					<li style="margin-left: 10px">
    						<h4><div class="label label-default">@user.Description</div></h4>
    					</li>
    				</ul>
    				<ul class="nav navbar-nav navbar-right">
    					<li>
    						<h4>You are person no: </h4>
    					</li>
    					<li style="margin-left: 10px">
    						<h4><div class="label label-default">@counter</div></h4>
    					</li>
    				</ul>
    			</div>
			</div>
	    </div>
    	<div class="jumbotron">  	       
	       	<h2 > Welcome</h2>
			<p> Attached below list of movies is taken from TMDB site. </p>
			<p> Please put rating for each of movies listed in the table below. </p>
       	</div>

       	
       	@helper.form(action = routes.Application.submitEval(user.Description)) {

       <table style="width:80%; margin-left:10%" class="table table-striped table-bordered table-hover">
       <tr>
       <td><b>No.</b></td>
     <td><b>Movie title</b></td>
     <td><b>Moviedb.org id</b></td>
     <td><b>Your rating</b></td>
       </tr>
       @for(movie <- movieList) {
       <tr id="@movie.id">

     <td>@movie.id</td>
     <td>@movie.title</td>
     <td>@movie.moviedb_id</td>
 	<td>
 
 	
<select id="StarList@movie.id" name="StarList@movie.id" onchange="setStars('@movie.id', this.value, '@user.Description');">
    <option value="null">null</option>
    <option value="0">0 stars</option>
    <option value="1">1 star</option>
    <option value="2">2 stars</option>
    <option value="3">3 stars</option>
    <option value="4">4 stars</option>
    <option value="5">5 stars</option>
</select>
 		<img id="image@movie.id" src="@routes.Assets.at("images/null.png")" />
 
     </tr>
    }
       </table>
     
       
       <input type="submit" class="btn btn-primary" value="Submit" Style="margin-left:48%; margin-bottom:20px;"></input>
       }

    </body>
    
 
</html>


